<template>
  <div class="wangyi-mv">
    <h3 class="title">{{ title }}</h3>
    <ul class="body-group">
      <li class="body-item" 
        v-for="(item,index) in data" 
        :key="index"
        @click="itemClick(item,index)">
        <img class="item-img" v-lazy="item.cover" />
        <span class="item-span">{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      data: Array,
      title: String
    },

    data() {
      return {
        singerName:'',
        SingerId:'',
        videoName:'',
      }
    },

    methods:{
      itemClick(item,index){
        // console.log();
        let singerInfo = item.artists
        this.videoName = item.name;
        if(singerInfo.length == 1){
          this.singerName = singerInfo[0].name;
          this.SingerId = singerInfo[0].id;
        }else{
          this.SingerId = singerInfo[0].id;
          let singername = [];
          singerInfo.forEach((element) => {
            singername.push(element.name);
          });
          this.singerName = singername.join();
        }
        this.$session.setItem('singerid',this.SingerId);
        this.$session.setItem('singername',this.singerName);
        this.$session.setItem('videoname',this.videoName);
        // Bus.$emit('singerid',this.SingerId);
        // Bus.$emit('singername',this.singerName);
        // Bus.$emit('videoname',this.videoName);
        // console.log(this.singerName);
        // console.log(this.SingerId);
        this.$router.push({path:'/playmv/'+item.id});
      }
    },
  }
</script>

<style scoped>
.wangyi-mv {
  width: 100%;
  margin: auto;
}

.title {
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
}


.body-group {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

.body-item {
  width: 30%;
  display: inline-block;
  margin-bottom: 15px;
  height: auto;
  flex: 0 0 30%;
  font-size: 14px;
  padding: 0 5px 0 5px;
}

.item-span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.item-img,
.item-span {
  width: 100%;
  border-radius: 5px;
  color: rgb(80, 80, 80);
}

a {
  text-decoration: none;
  color: black;
}

</style>